<template>
  <div style="display:flex;align-items:center;justify-content:center" >
    <slot></slot>
    <span v-if="role == 'admin'" class="vip">VIP</span>  
    <span v-else-if="role == 'superadmin'" class="vip">SVIP</span> 
  </div>
</template>

<script>
export default {
  name: 'user',
  props: {
    role:String,
  }
}
</script>

<style scoped lang="scss">
  .vip {
    padding:0px 6px;
    border:1px solid #8f7a4a;
    border-radius: 4px;
    height:16px;
    line-height: 16px;
    margin-left:5px;
    font-size:9px;
    background-color: #9e7122;
    color:#ffffff;
    // box-sizing: border-box;
    font-family: 'consolas', 'Courier New', Courier;
    // vertical-align: middle;
  }

</style>
